<template>
  <div class="team-box" :class="{pdbm:isSelectedShow}">
    <!--搜索-->
    <div class="search-body">
      <div class="input-box">
        <img src="../../assets/images/search-ico.png" alt=""/>
        <router-link to="">
          <form action="javascript:return true">
          <input type="search" placeholder="请输入查询关键字" v-model="searchInput" id="mySearch"/>
          </form>
        </router-link>
      </div>
      <!--<div class="title_div" @click="openPop"><img src="../../assets/images/filter-icon.png" alt=""></div>-->
      <div class="title_div" @click="manage"><span>管理</span></div>
    </div>
    <div class="content">
      <div style="text-align: center" v-if="accountList.length==0">暂无变动记录</div>
      <ul>
        <li v-for="item in accountList">
          <div class="box">
            <div class="selected-box" v-if="isSelectedShow">
              <img src="../../assets/images/select.png" v-if="true" alt="">
              <img src="../../assets/images/selected.png" v-if="false" alt="">
            </div>
            <div class="left">
              <!--<div class="img"><img src="../../assets/images/p-1.png" alt=""></div>-->

              <div class="center">
                {{item.type==0?'购买':item.type==1?'充值':item.type==2?'提现':item.type==3?'返利':item.type==4?'打赏':item.type==5?'退款':'被打赏'}}
                <br />
                <!--<span>{{item.note}}</span>-->
              </div>
              <div class="des">
                <p>{{item.note}}</p>
                <p>{{item.changeTime}}</p>
              </div>
            </div>
            <div class="right">

              <span v-if="item.type==0||item.type==2||item.type==4">-￥{{item.changeMoney}}</span>
              <span v-else="" style="color:#5eb95e">+￥{{item.changeMoney}}</span>
            </div>
          </div>
        </li>
      </ul>
      <footer class="footer" v-if="isSelectedShow">
        <div class="f-left">
          <img id="img" src="../../assets/images/select.png" v-if="true" alt="">
          <img id="img" src="../../assets/images/selected.png" v-if="false" alt="">
          <label for="#img"><span>全选</span></label>
        </div>
        <div class="f-right">
          <button>删除</button>
          <button @click="cancelBtn">取消</button>
        </div>
      </footer>
    </div>
    <!--筛选弹窗-->
    <div class="filter-pop" :class="{show:isShow}">
      <div style="height:100%;" @click="closePop()"></div>
      <div class="filter-bg">
        <p>筛选</p>
        <!--侍酒师，历史筛选内容-->
        <div class="select-box">
          <div class="row-title">时间</div>
          <div class="select-time">
            <div class="col-5">
              <p>开始时间</p>
              <div class="input-box">
                <input type="date" v-model="startTime">
              </div>
            </div>
            <div class="col-2">
              <span></span>
            </div>
            <div class="col-5">
              <p>结束时间</p>
              <div class="input-box">
                <input type="date" v-model="endTime">
              </div>
            </div>
          </div>
        </div>
        <div class="select-box">
          <div class="row-title">类别</div>
          <div class="select-info">
            <template v-for="(item,index) in classifyData">
              <span class="si-item" :class="{on:selecte==index}"
                    @click="selecte=index,changedClassify(index)">{{item}}</span>
            </template>
          </div>
        </div>

        <button type="button" class="confirm-btn" @click="sommmeliresConfirm()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  export default {
    name: "my-detailed",
    data() {
      return {
        searchInput:'',//查询关键字
        isShow: false,
        classifyData: ['全部', '提现', '交易','返利','打赏'],//弹窗类别
        selecte: 0,
        startTime:'',//筛选 开始时间 对接时请直接this.获取该个值
        endTime:'',//筛选 结束时间 对接时请直接this.获取该个值
        accountList: [],
        isSelectedShow:false
      }
    },
    methods: {
      // 打开筛选弹窗
      openPop() {
        this.isShow = true;
      },
      //筛选 确定按钮
      sommmeliresConfirm() {
        this.closePop();
      },
      // 关闭筛选弹窗
      closePop() {
        this.isShow = false;
      },
      // 选择年龄
      changedClassify(idx) {
        console.log(idx);
      },
      //管理
      manage(){
        this.isSelectedShow=true;
      },
      //取消管理
      cancelBtn(){
        this.isSelectedShow=false;
      },
    },
    mounted () {
      let self=this;
      let url = global.apiUrl + "/account/getAccountList";

      document.getElementById("mySearch").onsearch = function() {
        self.$http.get(url+"?search="+self.searchInput).then(res => {
          self.accountList = res.data.data;
        })
      };


      self.$http.get(url).then(res => {
        self.accountList = res.data.data;
      })
    },
    created: function () {
      document.title = "账户明细";



    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

  .team-box {
    /*position: absolute;*/
    /*top: 50px;*/
    /*left: 0;*/
    width: 100%;
    min-height: 100%;
    font-size: 1rem;
    margin-top: 50px;
    /*搜索*/
    .search-body {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #D44242;
      padding-top: 10px;
      .location, .input-box, .filter-box {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #fff;
        vertical-align: top;
      }
      .input-box {
        width: 83%;
        line-height: 26px;
        padding: 0 4px;
        border-radius: 4px;
        background-color: #fff;
        margin-left: 7px;
        text-align: center;
        img {
          width: 5%;
          vertical-align: sub;
        }
        form{
          display: inline-block;
          width:76%;
        }
        input {
          width: 100%;
          height: 30px;
          border: none;
          outline: none;
          vertical-align: top;
        }
      }
      .title_div {
        width: 12%;
        /*height: 30px;*/
        display: inline-block;
        text-align: center;
        vertical-align: top;
        line-height: 30px;
        img {
          width: 24px;
          height: 28px;
          vertical-align: top;
        }
        span{
          font-size: 1rem;
          color:#fff;
        }
      }
    }
    .content {
      width: 100%;
      li {
        width: 95%;
        margin: 0px auto;
        min-height: 45px;
        border-bottom: 1px solid #d9d9d9;
        .selected-box{
          float:left;
          margin-right:2%;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-top:20px;

          }
        }
        .left {
          width: 70%;
          float: left;
          .img {
            width: 17%;
            float: left;
            img {
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
          }
          .des {
            /*width: 83%;*/
            float: left;
            p {
              font-size: 0.8rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              padding-left: 5px;
            }
            p:last-child {
              margin-top: 5px;
              color: #b3b3b3;
            }
          }
        }
        .right {
          width: 20%;
          float: left;
          height: 45px;
          line-height: 45px;
          color: #d44242;
          text-align: center;
          font-size: 0.9rem;
        }
        .box {
          padding: 10px 0;
          overflow: hidden;
        }
      }
    }
  }
  .pdbm{
    padding-bottom:56px;
  }
  footer{
    padding:3% 2.5%;
    display: flex;
    justify-content: space-between;
    .f-left{
      flex: 1;
      line-height: 30px;
      img{
        width:20px;
        height:20px;
        vertical-align: middle;
      }
      label{
        font-weight: normal;
      }
      span{
        font-size: 1rem;
        vertical-align: middle;
      }
    }
    .f-right{
      flex: 2;
      text-align: right;
      button{
        width: 40%;
        border:none;
        font-size: 1rem;
        color:#fff;
        background: #d44242;
        padding:2% 0;
        border-radius:4px;
      }
      button:last-child{
        background: #aaa ;
      }
    }
  }

  /*筛选弹窗*/
  .filter-pop {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    transition: 0.5s all;
    z-index: 20;
    .filter-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      height: 100%;
      background: #fff;
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        background: #F3F3F3;
        font-size: 0.95rem;
        color: #777;
      }
      /*时间*/
      .select-time {
        width: 100%;
        display: flex;
        padding-right: 2.5%;
        margin-bottom:20px;
        .col-5 {
          flex: 5;
          text-align: center;
          p{
            background: transparent;
            padding:0;
            margin:0;
          }
          .input-box {
            width: 100%;
            height: 30px;
            border: 1px solid #d43f3f;
            text-align: center;
            border-radius: 4px;
          }
          input {
            width: 90%;
            height: 100%;
            font-size: 0.8rem;
            color: #d43f3f;
            border:none;
            direction: rtl;
            background: transparent;
            margin-left:14px;
          }
        }
        .col-2 {
          flex: 1;
          text-align: center;
          span{
            display: inline-block;
            width:70%;
            height:1px;
            margin:54px auto 0;
            background-color:#ff0000;
          }
        }
      }
      /*类别*/
      .select-box {
        width: 100%;
        padding-left: 10px;
        margin: 10px auto 0;
        .row-title {
          height: 30px;
          line-height: 30px;
          font-size: 0.95rem;
          color: #777;
        }
        .select-info {
          display: flex;
          flex-wrap: wrap;
          .si-item {
            font-size: 0.9rem;
            color: #777;
            padding: 2px 10px;
            border: 1px solid #aaa;
            border-radius: 20px;
            margin-right: 5%;
            margin-bottom: 10px;
          }
          .on {
            border: 1px solid #D44242;
            background: #D44242;
            color: #fff;
          }
        }
      }
      /*button*/
      .confirm-btn {
        width: 60%;
        height: 40px;
        border: none;
        border-radius: 4px;
        background: #D44242;
        font-size: 1rem;
        color: #fff;
        margin-left: 20%;
        margin-top: 60%;
      }
    }
  }

  .show {
    left: 0;
  }
</style>
